<template>
    <div>
        <center>
            <h2>今日打卡统计图表</h2>
        </center>
        <div id="myChart" :style="{width:'800px',height:'600px'}"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "Chart",
    mounted() {
        this.init();
    },
    data() {
        return {
            dataList:[]
        }
    },
    methods:{
        init(){
            let vm = this;
            let chartDom = document.getElementById('myChart');
            let myChart = echarts.init(chartDom);
            let option;
            axios.get('/myapi/todayChart').then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.dataList = response.data.data.todayChart;
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '统计人数',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: []
                            }
                        ]
                    };
                    option.series[0].data = vm.dataList;
                    option && myChart.setOption(option);
                }
            });
        }
    }
}
</script>

<style scoped>

</style>
